<template>
  <div class="employees">
    <!-- 工具栏组件 -->
    <pagetools>
      <!-- 使用插槽 -->
      <template #after>
        <el-button type="primary" @click="toImport" size="mini"
          >批量导入</el-button
        >
        <el-button @click="openadd" type="primary" size="mini"
          >+ 新增员工</el-button
        >
      </template>
    </pagetools>
    <el-card class="mycard">
      <!-- 表格组件 -->
      <el-table :data="list" border stripe>
        <el-table-column
          label="序号"
          type="index"
          width="100px"
        ></el-table-column>
        <el-table-column label="头像">
          <template slot-scope="{ row }">
            <img
              @click="showImg(row.staffPhoto)"
              class="myimg"
              v-errimg="require('@/assets/common/bigUserHeader.png')"
              :src="row.staffPhoto"
            />
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column
          label="手机号"
          prop="mobile"
          width="130px"
        ></el-table-column>
        <el-table-column label="工号" prop="workNumber"></el-table-column>
        <el-table-column label="聘用形式">
          <template slot-scope="{ row }">
            {{ row.formOfEmployment | myemployees }}
          </template>
        </el-table-column>
        <el-table-column label="部门" prop="departmentName"></el-table-column>
        <el-table-column label="入职时间" width="100px" prop="timeOfEntry">
          <template slot-scope="{ row }">
            {{ row.timeOfEntry | timeFormat }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="400">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              :disabled="'examine-staff' | btnper"
              @click="toDetail(row.id)"
              >查看</el-button
            >
            <el-button type="text">转正</el-button>
            <el-button type="text">调岗</el-button>
            <el-button type="text">离职</el-button>
            <el-button @click="openRole(row.id)" type="text">角色</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        class="mypagination"
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 新增 & 编辑面板 -->
    <addpanel
      @updateData="getUserList"
      :showDialog.sync="showDialog"
    ></addpanel>
    <!-- 二维码的弹出层 -->
    <el-dialog title="扫码预览图片" :visible.sync="preshow">
      <canvas ref="myCanvas" />
    </el-dialog>
    <!-- 分配角色对话框 -->
    <el-dialog title="分配角色" :visible.sync="roleShow">
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="(item, index) in roleList"
          :key="index"
          :label="item.id"
          >{{ item.name }}</el-checkbox
        >
      </el-checkbox-group>
      <!-- 确定 & 取消按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="submit" type="primary">提 交</el-button>
        <el-button @click="cancle">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserListApi,
  getUserInfoApi,
  setUserRoleApi
} from "@/api/employees";
import { getAllRoleApi } from "@/api/roles"; // 得到所有角色详细
import QrCode from "qrcode";
export default {
  components: {
    addpanel: () => import("./components/add.vue")
  },
  data() {
    return {
      // 表格的数据源：员工列表
      list: [],
      // 当前页
      currentPage: 1,
      // 页容量集合
      pageSizes: [5, 10, 15, 20],
      // 页容量
      pageSize: 5,
      // 总条数
      total: 0,
      showDialog: false, // 新增员工对话框显示与隐藏
      // 控制二维码面板的显示与隐藏
      preshow: false,
      // 控制分配角色面板的显示与隐藏
      roleShow: false,
      // 选中的多选框元素
      checkList: [],
      // 定义角色列表
      roleList: [],
      // 定义一个当前操作的用户的id
      userId: 0
    };
  },
  methods: {
    // 获取所有的用户信息
    async getUserList() {
      const res = await getUserListApi({
        page: this.currentPage,
        size: this.pageSize
      });
      // 保存数据
      console.log(res);
      this.list = res.rows;
      this.total = res.total;
    },
    // 页容量发生改变
    sizeChange(size) {
      this.pageSize = size;
      this.getUserList();
    },
    // 当前页发生改变
    currentChange(page) {
      this.currentPage = page;
      this.getUserList();
    },

    // 打开新增面板
    openadd() {
      this.showDialog = true;
    },
    // 跳转到导入页面
    toImport() {
      this.$router.push("/employees/import");
    },
    // 跳转到详情页面
    toDetail(id) {
      this.$router.push(`/employees/details?id=${id}`); //push({path:'xx',queir:{id:id}})
    },

    // 将图片转为二维码，渲染到页面上
    showImg(url) {
      // 判断url是否存在
      if (url) {
        // 将面板打开
        this.preshow = true;
        this.$nextTick(() => {
          // 将图片转为二维码，渲染到页面上
          QrCode.toCanvas(this.$refs.myCanvas, url, {
            width: 200,
            height: 200
          });
        });
      } else {
        this.$message.error("暂无图片");
      }
    },

    // 打开角色分配对话框
    // 打开角色分配面板
    async openRole(id) {
      this.userId = id; //把当前的用户id存起来
      this.roleShow = true;
      let res = await getUserInfoApi(id); // 发请求拿当前的角色信息
      this.checkList = res.roleIds;
    },

    // 获取所有角色信息
    async getAllRole() {
      const res = await getAllRoleApi();
      this.roleList = res.rows;
    },

    // 修改用户角色
    async submit() {
      try {
        let res = await setUserRoleApi({
          id: this.userId, // 当前操作用户的id
          roleIds: this.checkList // 新设置的角色集合
        });
        console.log(res);
        // 提示成功
        this.$message.success("修改角色成功");
        // 关闭面板
        this.roleShow = false;
        //
      } catch {
        console.log("修改失败");
      }
    },

    // 分配角色取消按钮
    cancle() {
      this.roleShow = false;
    }
  },

  created() {
    // 得到所有的用户信息
    this.getUserList();
    // 得到所有的角色列表
    this.getAllRole();
  }
};
</script>

<style lang="scss" scoped>
.employees {
  padding: 20px;
  .mycard {
    margin-top: 20px;
    .mypagination {
      text-align: right;
      margin-top: 20px;
    }
  }
  .myimg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
}
</style>
